<template>
    <div class="video-box">
        <div class="video-box2">
            <video controls :src="vedio2.vedioUrl.url">
            </video>
        </div>
        <div class="video-box3">
            <div class="vedio-name">
                <p>
                    {{ vedio2.vedioDetail.description }}
                </p>
            </div>
            <div class="vedio-name2">
                <p>演唱：{{ vedio2.vedioDetail.title }}</p>
                <p>{{ vedio2.vedioDetail.praisedCount }}次播放</p>
                <p>发布时间： {{ vedio2.vedioDetail.publishTime }}</p>
            </div>
        </div>
        <div>
            <button>收藏</button>
            <button>下载</button>
            <button>分享</button>
        </div>
        <hr>
        <div class="todayRecommend">
            <div class="today" v-for="(item, index) in vedio2.allVedio" :key="index" @click="gotoMv(item.vid)">
                <img :src="item.coverUrl" alt="">
                <a :href="`http://169.254.58.118:5173/#/home/mv?id=${item.vid}`">
                    {{ item.title }}
                </a>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { onMounted, nextTick } from 'vue';
import { vedio } from '@/stores/vedio';

const route = useRoute()
const vedio2 = vedio()

const gotoMv = (vid: string) => {
    vedio2.getVedio(vid)
}

onMounted(async () => {
    await nextTick()
    await vedio2.getVedio(route.query.vid)
})



</script>

<style scoped lang="scss">
.todayRecommend {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    align-items: center;
    justify-items: center;
    margin-bottom: 20px;


    .today {
        width: 140px;
        height: 140px;
        border-radius: 10px;
        // background-color: black;
        position: relative;
        margin-top: 10px;
        margin-bottom: 60px;
        background-color: var(--imgColor);


        img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            position: relative;
            cursor: pointer;

            &:hover {
                transition: all 1s linear;

            }
        }

        a {
            margin-top: 10px;
            display: block;
            width: 100%;
            height: 40px;
            color: rgb(41, 41, 41);
            // background-color: aqua;
            left: 0;
            overflow-x: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            &:hover {
                color: rgba(101, 99, 99, 0.833);
            }
        }
    }
}
</style>